<template>
	<view class="bg">
		<xl-navbar title="Banner轮播图" fixed shadow></xl-navbar>
		<view class="title">基础样式：mode：aspectFill，height：280rpx</view>
		<xl-banner :list="banners"></xl-banner>
		
		<view class="title">对象列表，默认属性url，显示标题，跳转路由</view>
		<xl-banner :list="banners2" keyName="url" showTitle router></xl-banner>
		
		<view class="title">高度：单位rpx，不能用100%，圆角，背景颜色</view>
		<xl-banner :list="banners" height="313" radius="15" bgColor="#0a93ff"></xl-banner>
		
		<view class="title">3D切换，顺序循环播放，非激活缩放比例</view>
		<xl-banner :list="banners" circular previousMargin="50" nextMargin="50" inactiveScale="0.9" radius="6"></xl-banner>
		
		<view class="title">显示面板指示器，线型指示</view>
		<xl-banner :list="banners" indicator></xl-banner>
		
		<view class="title">显示面板指示器，点型指示，修改颜色</view>
		<xl-banner :list="banners" indicator indicatorMode="dot" indicatorActiveColor="#999" indicatorInactiveColor="#bbb"></xl-banner>
		
		<view class="title">不自动切换，默认autoplay：true</view>
		<xl-banner :list="banners" :autoplay="false"></xl-banner>
		
		<view class="title">设置切换间隔(默认3000毫秒)、用时(300毫秒)</view>
		<xl-banner :list="banners" interval="1000" duration="500"></xl-banner>
	</view>
</template>

<script setup>
	import { ref, onMounted, computed } from "vue";
	
	const banners = ref([
		'/static/imgs/banner/banner1.png',
		'/static/imgs/banner/banner2.png',
		'/static/imgs/banner/banner3.png'
	])
	
	const banners2 = ref([
		{ url: '/static/imgs/banner/banner1.png', title: 'banner1', path: 'tabs'},
		{ url: '/static/imgs/banner/banner2.png', title: 'banner2'},
		{ url: '/static/imgs/banner/banner3.png', title: 'banner3', path: 'sub_pages/pages/component/image'}
	])
</script>

